<template>
  <div class="app-container">
    <form-filter @on-filter="submitFilterForm"/>
    <el-table border :data="tableData.list" v-loading="loading" element-loading-text="加载中..." class="mgtop">
      <el-table-column label="被举报内容"  prop="msg_body" align="center" width="260">

      </el-table-column>
      <el-table-column label="发言会员账号" prop="target_account" align="center" width="120">

      </el-table-column>
      <el-table-column label="发言会员昵称" prop="target_nick" align="center" width="120">

      </el-table-column>
      <el-table-column label="发言会员类型" prop="target_type" align="center" width="120">
         <template slot-scope="{row}">
           {{row.target_type==0?'本站会员':(row.target_type==1?'外部拉取':'-')}}
        </template>
      </el-table-column>
      <el-table-column label="赛事房间" prop="room" align="center">

      </el-table-column>
      <el-table-column label="发送时间"  prop="msg_time" align="center" width="120" >

      </el-table-column>
      <el-table-column label="举报人数" prop="report_count" align="center" width="120" >
          <template slot-scope="{row}">
          <el-button type="text"   @click="roleCheck('chatRoom-banned-table-detail')?openDialog(row,'detail'):null">{{row.report_count}}</el-button>

        </template>
      </el-table-column>
      <el-table-column label="历史禁言次数" prop="ban_count" align="center" width="120" >

      </el-table-column>
      <el-table-column label="举报类别"  align="center" prop="cate" width="120" >

      </el-table-column>
      <el-table-column label="会员状态"  align="center" width="120" prop="status" >
        <template slot-scope="{row}">
           {{row.status==0?'正常':(row.status==1?'禁言中':'-')}}
        </template>
      </el-table-column>
       <el-table-column label="操作"  align="center" width="120" fixed="right" >
         <template slot-scope="{row}">
          <el-button type="text"  v-if="roleCheck('chatRoom-report-ban')" @click="openDialog(row,'ban')">{{row.status==0?'禁言':'-'}}</el-button>

        </template>
      </el-table-column>
    </el-table>
    <reportDialog
      :dialogVisible="reportDialogVisible"
      v-if="reportDialogVisible"
      :row-data="dialogData"
      @cancel="reportDialogVisible = false"
    />
   <BanDialog
      :dialogVisible="banDialogVisible"
      v-if="banDialogVisible"
      :row-data="dialogData"
      @cancel="banDialogVisible = false"
    />
    <div class="pagination-container">
      <el-pagination background @size-change="gridSizeChange" @current-change="gridCurrentChange"
                     :current-page="filters.page" :page-sizes="gridPageSize" :page-size="filters.size"
                     :layout="gridLayout" :total="Number(tableData.total)">
      </el-pagination>
    </div>

  </div>
</template>


<script>
import { getReportLogList } from '@/services/api/chatRoom';
import FormFilter from './reportFilter.vue';
import BanDialog from './dialog/banDialog';
import reportDialog from './dialog/reportDialog';

import { grid } from '@/build';

export default {
  name: 'reportLog',
  components: { FormFilter, BanDialog, reportDialog },
  mixins: [grid],
  props: ['value'],
  data() {
    return {
      banDialogVisible: false,
      dialogData: '',
      reportDialogVisible: false,
      DetailDialogType: '',
      tableData: {},
      auditStep: 0,
      rowData: {},
      auditDialogVisible: false,
      filters: {
        page: 1,
        size: 20,
        status: undefined,
        msg_start_time: moment().format('YYYY-MM-DD 00:00:00'),
        msg_end_time: moment().format('YYYY-MM-DD 23:59:59'),
      },
      filterDateType: false,
    };
  },
  watch: {
    value(val) {
      if (val) {
        this.gridSearch();
      }
    },
  },
  methods: {
    submitFilterForm(formInline) {
      const { time } = formInline;
      if (!_.isUndefined(time) && _.isArray(time)) {
        [this.filters.msg_start_time, this.filters.msg_end_time] = time;
        // formInline = { ...formInline, msg_start_time, msg_end_time };
      } else {
        this.filters.msg_start_time = undefined;
        this.filters.msg_end_time = undefined;
      }
      if (formInline.cate == '全部') { formInline.cate = ''; }
      this.filters = { ...this.filters, ...formInline };
      // this.filters = {};
      this.doGet({ action: 'getGrid' });
    },
    openDialog(row, dialogType) {
      if (dialogType === 'detail') {
        this.reportDialogVisible = true;
      } else {
        if (row.status != 0) return;
        this.banDialogVisible = true;
      }
      // this.banDialogVisible = true;
      window.scrollTo(0, 0);
      this.dialogData = row;
    },
  },
  mounted() {
    this.bindGet(getReportLogList, 'tableData', {
      action: 'getGrid',
      sendingData: 'filters',
    });
    this.getAll();
  },
};
</script>

<style scoped>
.mgtop{margin-top:30px}
</style>
